<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>

    <script>

        // 防抖和节流都是为了解决高频率触发事件的
        //    resize / scroll


        // 降低事件频率   原本1s触发100次    1s触发10次
        // 把事件触发的时间间隔拉长了    --- 也就是写延时器


        // 节流 ： 事件一旦触发了，在这段时间内都不会再触发，这段时间后可以再次触发

        // var flag = true ;

        // window.onscroll = function () {
        //     if(!flag) return ;
        //     flag = false ;
        //     let timer = setTimeout(() => {
        //         console.log('我滚了');
        //         flag = true ;
        //     }, 300)

        // }

        window.onscroll = throttle(function() {
            console.log('我滚了');
        }) ;

        // window.onresize = function() {
        //     console.log('页面大小改变了');
        // }

        window.onresize = throttle(function() {
            console.log('页面大小改变了');
        }) ;



        function throttle(cb , time = 300) {
            var flag = true;
            function fn() {
                if (!flag) return;
                flag = false;
                let timer = setTimeout(() => {
                    cb()
                    flag = true;
                }, time)
            }
            return fn
        }



    </script>

</body>

</html>